<!-- src/components/LyricEditor.vue -->
<template>
  <div class="lyric-editor">
    <textarea v-model="lyrics" rows="4" 
              class="input-field mb-3" 
              placeholder="请输入歌词，每行对应一个小节"></textarea>
    
    <div v-if="isEditing" class="lyric-preview">
      <StaffNotation>
        <!-- 歌词浮动在五线谱上方 -->
        <div v-for="(line, index) in lyrics.split('\n')" :key="index"
             class="lyric-line absolute" 
             :style="{ top: `${index * 100}px` }">
          {{ line }}
        </div>
        
        <!-- 简谱音符显示在五线谱上 -->
        <div v-for="(bar, barIndex) in scoreBars" :key="barIndex"
             class="bar-container absolute" 
             :style="{ left: `${barIndex * 120}px`, top: '80px' }">
          <div v-for="(note, noteIndex) in bar" :key="noteIndex"
               class="note-display">{{ formatNote(note) }}</div>
        </div>
      </StaffNotation>
    </div>
  </div>
</template>

<script setup>
import StaffNotation from './StaffNotation.vue';
import { ref, computed } from 'vue';
import { useScoreStore } from '../stores/scoreStore';

const scoreStore = useScoreStore();
const lyrics = ref('');
const isEditing = ref(true);

// 获取乐谱数据
const scoreBars = computed(() => scoreStore.bars);

// 格式化简谱音符
const formatNote = (note) => {
  if (!note) return '';
  // 处理上下加点等格式
  if (note.startsWith('·')) return `<sup>${note[1]}</sup>${note.slice(2)}`;
  if (note.endsWith('·')) return `${note.slice(0, -1)}<sub>${note[note.length-1]}</sub>`;
  return note;
};
</script>